<template>
  <div>
    <Card class="card clear-float">
      <p class="card-title" slot="title">{{$t('wNVMkHXjB-VldkBBOQgPc')}}</p>
      <div class="operate-area">
        <div class="inline-item btn-item">
          <Button type="primary" icon="md-add" @click="addCar"
            >{{$t('N8xdbBoV-d6Vc33tKrGGm')}}</Button
          >
        </div>
      </div>
      <Table :loading="loading" :columns="columns" :data="data"></Table>
    </Card>
    <Modal
      v-model="formModal"
      :title="formTitle"
      footer-hide
      :mask-closable="false"
    >
      <form-info
        :status="status"
        :data="formData"
        @success="success"
        @fail="fail"
        @close="close"
      />
    </Modal>
  </div>
</template>

<script>
import { getStationCarnumList, deleteStationCarnum } from '@/api/data2'
import FormInfo from './components/vin_form_info'

export default {
  name: 'vin_bus_info',
  components: {
    FormInfo
  },
  data () {
    return {
      loading: false,
      formModal: false,
      status: 'new',
      formData: {},
      columns: [
        {
          type: 'index',
          width: 60,
          align: 'center'
        },
        {
          title: 'VIN',
          key: 'vin',
          width: 200
        },
        {
          title: this.$t('M0SWlK7GRCyXb6WvRMZgb'),
          key: 'carnum',
          width: 200
        },
        {
          title: this.$t('Dl_XYXdSr6xhI9rMZwbLh'),
          key: 'nickname'
        },
        {
          title: this.$t('R50mHX0LambJk39x8cmq6'),
          key: 'remarks'
        },
        {
          title: this.$t('Ty1ns2epHIaihi82jwUfc'),
          fixed: 'right',
          width: 200,
          render: (h, params) => {
            return h('div', [
              h(
                'Button',
                {
                  props: {
                    type: 'warning',
                    size: 'small',
                    icon: 'ios-create'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.editItem(params.index)
                    }
                  }
                },
                this.$t('3cH_U2GeBUW1V74W8oDNv')
              ),
              h(
                'Button',
                {
                  props: {
                    type: 'error',
                    size: 'small',
                    icon: 'ios-create'
                  },
                  on: {
                    click: () => {
                      this.deleteItem(params.index)
                    }
                  }
                },
                this.$t('hND4KLgCabT6swtTJBIUf')
              )
            ])
          }
        }
      ],
      data: [],
      total: 10,
      current: 1,
      pageSize: 5,
      pageSizeOpts: [5, 10, 15, 20]
    }
  },
  created () {
    this.queryTable()
  },
  computed: {
    isAdmin () {
      return this.$store.getters.isAdmin
    },
    isAgent () {
      return this.$store.getters.isAgent
    },
    formTitle () {
      return (this.status === 'new' ? this.$t('N8xdbBoV-d6Vc33tKrGGm') : this.$t('3cH_U2GeBUW1V74W8oDNv')) + this.$t('6NPF408MDpjK1Ot4A0OGZ')
    }
  },
  methods: {
    searchTable () {
      this.queryTable()
    },
    addCar () {
      this.formData = {
        vin: '',
        carnum: '',
        nickname: '',
        remarks: ''
      }
      this.status = 'new'
      this.formModal = true
    },
    async queryTable ({
      current = this.current,
      pageSize = this.pageSize
    } = {}) {
      this.loading = true
      const { code, data, desc } = await getStationCarnumList({
        stationid: this.$store.state.user.stationId
      })
      if (code == 200) {
        this.data = data.datalist || []
      } else {
        this.$Message.error(desc)
      }
      this.loading = false
    },
    editItem (index) {
      const item = this.data[index]
      this.formData = {
        ...item
      }
      this.status = 'edit'
      this.formModal = true
    },
    deleteItem (index) {
      this.$Modal.confirm({
        title: this.$t('oiW2WYZoyJSt3j7yCy10e'),
        content: this.$t('KePcPzUJR7hEB6lp4nEtV'),
        onOk: async () => {
          // this.data.splice(index, 1)
          const { code, desc } = await deleteStationCarnum({
            vin: this.data[index].vin,
            stationid: this.$store.state.user.stationId
          })
          if (code == 200) {
            this.$Message.success(this.$t('hWGIgDqZtmSWFd9gU3Ya7'))
            this.queryTable()
          } else {
            this.$Message.error(desc)
          }
        }
      })
    },
    success (desc) {
      if (this.status === 'new') {
        this.$Message.success(desc || this.$t('38AWpi9C1Z7eLtpj1TEfD'))
      } else {
        this.$Message.success(desc || this.$t('qDM1Ic0NDNp4weHsjQ4sN'))
      }
      this.formModal = false
      this.queryTable()
    },
    fail (msg) {
      this.formModal = false
      this.$Message.error(msg)
    },
    close () {
      this.formModal = false
    }
  }
}
</script>
